<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>花县令</title>
    <link rel="stylesheet" type="text/css" href="/style/admin/login/css/styles.css">
</head>
<style>
    .wrapper {
        height: 100vh;
        /*background: #75C1B5;*/
        /*opacity: 1;*/
    }

    .header {
        margin: 40px 0 0 0;
        width: 100%;
        height: 100px;
    }

    .header-left {
        float: left;
        background: #fff;
        height: 80px;
        width: 200px;
        border-radius: 0 20px 20px 0;
        display: flex;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;

        background-color: #fff;
    }

    .header-right {
        float: right;
        color: #fff;
        margin-right: 70px;
        font-size: 22px;
        position: relative;
        z-index: 100;
    }

    .header-right a {
        color: #fff;
        margin-right: 70px;
        font-size: 14px;
        text-decoration: none;
    }

    .center {
        width: 100%;
        display: flex;
        position: absolute;
        bottom: 0;
    }


    .center-qrcode {
        flex: 1.5;
    }

    .qrcode-group {
        margin-right: 200px;
    }

    .center-qrcode img {
        width: 35%;
        float: right;
        margin-top: 10px;
        margin-right: 50px;
    }

    .center-video {
        flex: 1;
        padding-left: 100px;
        box-sizing: border-box;
    }

    .center-video-border {
        width: 80%;
        background: url("https://huaxianling-v2.oss-cn-qingdao.aliyuncs.com/Pc/video_border.png");
        background-size: cover;
        position: relative;
    }

    .center-video video {
        position: absolute;
        z-index: 100;
    }

</style>
<body>
<div class="htmleaf-container">
    <div class="wrapper">
        <div class="header">
            <div class="header-left">
                <img src="logo.png" alt="">
            </div>
            <div class="header-right">
                <a href="/pc/login">老会员批量转移▶</a>
            </div>
        </div>

        <div class="center">
            <div class="center-video">
                <div class="center-video-border">
                    <video id="video" loop="loop" muted="muted" autoplay="autoplay"
                           src="https://huaxianling-v2.oss-cn-qingdao.aliyuncs.com/Pc/video.mp4"></video>
                </div>

            </div>
            <div class="center-qrcode">
                <div class="qrcode-group">
                    <img src="/pc/a-code.png" alt="">
                    <img src="/pc/i-code.png" alt="">
                </div>
            </div>
        </div>

                <ul class="bg-bubbles">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
    </div>
</div>

<script src="/style/admin/login/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="/style/admin/login/js/slide.js" type="text/javascript"></script>
</body>
<script>
    $(document).ready(function () {
        //隐藏滚动条

        $(document.body).css({
            "overflow-x": "hidden",
            "overflow-y": "hidden"
        });


        videoSize();
    })

    function videoSize() {
        var video_border_width = $('.center-video-border').width();
        var video_border_height = (1794 * video_border_width) / 1450;
        $('.center-video-border').height(video_border_height);

        var video_width = (730 * video_border_width) / 1450;
        var video_height = (1300 * video_border_height) / 1794;

        var video_left = (439 * video_border_width) / 1450;
        var video_top = (240 * video_border_height) / 1794;

        $('#video').width(video_width);
        $('#video').height(video_height);

        $('#video').css('left',video_left+'px');
        $('#video').css('top',video_top+'px');

        $(window).resize(function () {          //当浏览器大小变化时
            var video_border_width = $('.center-video-border').width();
            var video_border_height = (1794 * video_border_width) / 1450;
            $('.center-video-border').height(video_border_height);


            var video_width = (730 * video_border_width) / 1450;
            var video_height = (1300 * video_border_height) / 1794;

            var video_left = (439 * video_border_width) / 1450;
            var video_top = (240 * video_border_height) / 1794;

            $('#video').width(video_width);
            $('#video').height(video_height);

            $('#video').css('left',video_left+'px');
            $('#video').css('top',video_top+'px');
        });
    }
</script>
</html>